<template>
  <div class="work">
    <h3>{{ $t('dashboard.calendar') }}</h3>
    <div class="yearmonth">
      <el-select v-model="year" placeholder="请选择" @change="changeData">
        <el-option
          v-for="item in yearArr"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-select v-model="month" placeholder="请选择" @change="changeData">
        <el-option
          v-for="item in 12"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </div>
    <el-calendar v-model="nowDate">
      <template slot="dateCell" slot-scope="{ date }">
        <span class="word">{{ date | getDays }}</span>
        <span class="xiu" v-if="isWeek(date)">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: 'workCalendar',
  props: {
    // 从外部传入的当前时间
    localDate: {
      type: Date,
      default: new Date()
    }
  },
  watch: {
    localDate: {
      immediate: true, // 一打开页面就执行侦听器
      handler: function (newval) {
        // 保存当前时间
        this.nowDate = new Date(newval)
        // 保存年
        this.year = this.nowDate.getFullYear()
        // 保存月
        this.month = this.nowDate.getMonth() + 1
        // 得到年份的数组
        this.getYearArr()
      }
    }
  },
  filters: {
    // 得到日期对象中的天数
    getDays (time) {
      var _time = new Date(time)
      // 得到天数据
      return _time.getDate()
    }
  },
  data () {
    return {
      // 当前时间
      nowDate: '',
      // 当前年
      year: '',
      // 当前月
      month: '',
      // 年份的数组
      yearArr: []
    }
  },
  methods: {
    // 改变时间
    changeData () {
      // 判断，如果年月是当前时间，选中的日期应该是当前天数
      var _time = new Date()
      var _year = _time.getFullYear()
      var _month = _time.getMonth() + 1
      var _day = _time.getDate()
      if (this.year === _year && this.month === _month) {
        // 根据年月得到一个具体的时间，将时间赋值给 nowDate
        this.nowDate = new Date(`${this.year}/${this.month}/${_day}`)
      } else {
        this.nowDate = new Date(`${this.year}/${this.month}/1`)
      }
    },
    // 判断是否是周末
    isWeek (date) {
      var _time = new Date(date)
      // 得到当前日期是本周的第几天
      var day = _time.getDay()
      var _year = _time.getFullYear()
      var _month = _time.getMonth() + 1
      // 判断日期是当年当月
      if (this.year === _year && this.month === _month) {
        if (day === 6 || day === 0) {
          // 说明是周末
          return true
        }
      }
    },
    fn (date, data) {
      console.log('date', date)
      console.log('data', data)
    },
    // 得到年份的数组
    getYearArr () {
      const _min = this.year - 5
      const _max = this.year + 5
      for (var i = _min; i <= _max; i++) {
        this.yearArr.push(i)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.work {
  h3 {
    font-weight: 400;
    font-size: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  .yearmonth {
    text-align: right;
  }
  ::v-deep .el-calendar__header {
    display: none;
  }
  ::v-deep .el-calendar-table {
    height: 500px;
    th {
      font-weight: 700;
    }
    th:nth-child(6),
    th:nth-child(7) {
      color: #fa7c4d;
    }
    .el-calendar-day {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    td {
      border: none !important;
    }
    .is-today {
      .word {
        background-color: #409eff;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        line-height: 25px;
        text-align: center;
        color: #fff;
      }
    }
  }
  .xiu {
    background-color: #fa7c4d;
    color: #fff;
    font-size: 12px;
    padding: 2px;
    border-radius: 50%;
    margin: 0 5px;
  }
}
</style>